<template>
  <div>
    <el-row>
        <el-col>
            <!-- 搜索条件 -->
            <el-form :inline="true"  class="demo-form-inline" size="small">
            <el-form-item>
                <el-input  placeholder="请输入病人姓名" v-model="registered.rsName" clearable=""></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select  v-model="registered.rsGender" clearable="">
                    <el-option value="男"></el-option>
                    <el-option value="女"></el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input  placeholder="身份证号" v-model="registered.idCard" clearable=""></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="el-icon-search" @click="queryConditionRegistered">查询</el-button>
            </el-form-item>
        </el-form>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <!-- 数据 -->
            <el-table
                :data="tableData"
                style="width: 100%">
                <!-- <el-table-column 
                prop="imgSrc"
                label="图片"
                width="100">
                <template slot-scope="scope">
                 <img :src="scope.row.imgSrc" style="width:100%">
                </template>
                </el-table-column> -->
                <el-table-column
                    prop="rsNo"
                    label="挂号编号">
                </el-table-column>
                <el-table-column
                    prop="rsName"
                    label="名字">
                </el-table-column>
                <el-table-column
                    prop="rsGender"
                    label="性别">
                </el-table-column>
                <el-table-column
                    prop="idCard"
                    label="身份证号">
                </el-table-column>
                <el-table-column
                    prop="rsAge"
                    label="年龄">
                </el-table-column>
                <el-table-column
                    prop="rsDepartment"
                    label="科室">
                </el-table-column>
                <el-table-column
                    prop="rsWorker"
                    label="医生">
                </el-table-column>
                <el-table-column
                    prop="rsRegistrationTime"
                    label="预约就诊时间"
                    width="180">
                </el-table-column>
                <!-- <el-table-column
                    prop="status"
                    label="状态">
                    <template slot-scope="scope">
                        {{scope.row.status == 1 ? '下架' : '上架'}}
                    </template>
                </el-table-column> -->
                <el-table-column
                    prop="rsCaseId"
                    label="病例">
                    <template slot-scope="scope">
                        <el-button @click="goToCase(scope.row.rsCaseId)" type="primary" size="mini" icon="el-icon-reading">查看病历</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button @click="tools(scope.row)" type="primary" size="mini" icon="el-icon-s-tools"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <el-row>
        <el-col>
            <!-- 分页 -->
            <el-pagination
            @size-change="onSizeChange"
            @current-change="currentPage"
            @prev-click="prePage"
            @next-click="nextPage"
            :current-page="pageNum"
            :page-sizes="[5, 10, 12, 16]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-col>
    </el-row>
    <!-- 具体功能对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="具体操作">
      <el-menu :default-active="activeMenu" class="el-menu-demo" @select="handleMenuSelect" mode="horizontal">
        <el-menu-item index="1">开检查</el-menu-item>
        <el-menu-item index="2">开药申请</el-menu-item>
        <el-menu-item index="3">住院申请</el-menu-item>
        <el-menu-item index="4">开病历</el-menu-item>
      </el-menu>
      <template>
        <el-form :model="formData" v-if="activeMenu === '1' || activeMenu === '3'" label-width="80px">
            <el-form-item label="病人名字">
                <el-input :value="patient.rsName"></el-input>
            </el-form-item>
            <el-form-item label="医生名字">
                <el-input :value="doctor.docName"></el-input>
            </el-form-item>
            <el-form-item v-if="activeMenu === '1'" label="检查">
                <el-select  placeholder="检查" v-model="formData.projectId"  clearable="">
                    <!-- <el-option v-for="check in checks" :key="check.id" :label="check.pjName" :value="check.id"></el-option> -->
                    <el-option v-for="check in checks" :key="check.id" :label="`${check.pjName} —— ￥${check.pjPrice}`" :value="check.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item v-else label="住院科室">
                <el-select v-model="docDeId" clearable="">
                    <el-option v-for="department in deList" :key="department.id" :label="department.deName"
                        :value="department.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <!-- <el-button>打印</el-button> -->
            </el-form-item>
            <el-form-item>
                <el-button type="warning" size="mini" @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" size="mini" @click="change">确定</el-button>
            </el-form-item>
        </el-form>

<!-- 添加开药表 -->
        <el-form v-else-if="activeMenu === '2'" v-model="drugDistributionDTO">
            <el-form-item label="药名">
                <el-select
                    v-model="drugDetail.dsName"
                    filterable
                    remote
                    :remote-method="remoteSearch"
                    placeholder="请输入药品名称"
                    clearable
                    @change="handleSelectionChange"
                >
                    <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="`${item.dsName} —— ￥${item.dsOutPrice}——库存:${item.dsStock}`"
                    :value="item"
                    />
                </el-select>
            </el-form-item>
            <el-form-item  label="药品数量">
                <el-input-number v-model="mdNum" @change="addDrugDetail" :min="1" :max="50" label="药品数量"></el-input-number>
            </el-form-item>
            <el-form-item v-model="drugDetails">
                <!-- 用药明细的表格数据 -->
                <el-table
                    :data="drugDetails"
                    style="width: 100%">
                    <el-table-column
                        type="index">
                    </el-table-column>
                    <el-table-column
                        prop="mdName"
                        label="药名"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="mdNum"
                        label="药品数量">
                    </el-table-column>
                    <el-table-column
                        prop="mdBuyPrice"
                        label="药品单价">
                    </el-table-column>
                    </el-table>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" size="mini" @click="dialogVisible=false">取消</el-button>
                <el-button type="primary" size="mini" @click="change">确定</el-button>
            </el-form-item>
        </el-form>
        
        <!-- el-form -->
        <el-form v-else-if="activeMenu === '4'">
            <AddCase @closeDialog="handleCloseDialogWithData" :caseId="patient.rsCaseId"></AddCase>
        </el-form>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import AddCase from './AddCase.vue';

export default {
    data(){
        return{
            drugDistributionDTO:{},//开药 和 用药明细 发送到后端的对象
            drugDetails:[],//用药明细对象的数组
            drugDetail:{},//用药明细对象
            deList:[],//住院科室
            docDeId:'',//住院科室id
            selectedValue: '', // 选中的值
            options: [], // 下拉选项
            formData:{},//表单提交的数据
            checks:[],//全部检查
            patient:{},//病人
            doctor:{},//医生
            activeMenu:'1',
            dialogVisible:false,
            registered:{},//挂号信息
            pageNum:'1',
            pageSize:'5',
            total:'',
            dialogFormVisible:false,
            tableData: [],
            mdNum:''
        }
    },
    methods:{
        queryConditionRegistered(){
            this.pageNum=1;
            this.queryRegistered()
        },
        queryRegistered(){
            let pageParam={}
        pageParam.pageNum=this.pageNum
        pageParam.pageSize=this.pageSize
        pageParam.param=this.registered
        this.$axios.post("api/doctor/queryRegistered",pageParam)
        .then(res=>{
            if(res.data.code==200){
                let pageInfo=res.data.data
                this.tableData=pageInfo.list
                this.pageNum=pageInfo.pageNum
                this.pageSize=pageInfo.pageSize
                this.total=pageInfo.total
            }
        })
        },
        onSizeChange(val){
            this.pageNum=1;
            this.pageSize=val;
            this.queryRegistered()
        },
        currentPage(val){
            this.pageNum=val;
            this.queryRegistered()
        },
        prePage(val){
            this.pageNum=val;
            this.queryRegistered()
        },
        nextPage(val){
            this.pageNum=val;
            this.queryRegistered()
        },
        queryConditionBook(){
            this.pageNum=1;
            this.queryRegistered()
        },
        goToCase(rsCaseId){
            this.$router.push({path:"/case",query:{caseId:rsCaseId}})
        },
        tools(val){
            this.dialogVisible=true;
            this.patient = val;
        },
        handleMenuSelect(index) {
        this.activeMenu = index;
        // 执行你想要的逻辑，比如根据选中的菜单项进行相应的操作
        // console.log("选中了菜单项:", index);
        },
        //查找医生信息
        queryDoctor(){
        this.$axios.get("api/doctor/queryDoctor")
        .then(res=>{
            if(res.data.code==200){
                this.doctor=res.data.data;
            }
        })
        },
        //根据activeMenu判断选择哪个方法
        change(){
            if(this.activeMenu==1){
                this.addCheckItem()
            }
            if(this.activeMenu==2){
                this.addDrugItem()
            }
            if(this.activeMenu==3){
                this.addInpatient()
            }
        },
        //查找检查信息
        queryChecks(){
            this.$axios.get("api/doctor/queryChecks")
        .then(res=>{
            if(res.data.code==200){
                this.checks=res.data.data;
            }
        })
        },
        //开检查和检查明细
        addCheckItem(){
            console.log("check")
            if(this.formData.projectId==null || this.formData.projectId==''){
                this.$message.warning('请选择检查项目')
                return;
            }
            this.formData.patientId = this.patient.rsCaseId;
            this.$axios.post("api/doctor/addCheck",this.formData)
            .then(res=>{
                if(res.data.code==200){
                    this.$message.success("开单成功")
                    this.checkItem=res.data.data//检查明细回显 todo
                }
            })
        },
         // 远程搜索方法
        remoteSearch(query) {
        // 在这里执行远程搜索，获取匹配的药品列表
        // 分页加条件查询展示
        let drug = {};
        drug.dsName = query;
        this.$axios.post('api/drug/queryDrugList', drug)
            .then(res => {
            if (res.data.code === 200) {
                this.options= res.data.data;
                this.selectedValue=''
          }
        })
        },
        // 处理选项变化事件
        handleSelectionChange(value) {
        // console.log('选中的药品值：', value);
        // 在这里可以根据选中的药品值执行相应的操作
        this.drugDetail=value;
        // console.log('选中的药品值：',  this.drugDetail);
        this.options=[]
        },
        //添加用药明细数组
        addDrugDetail(val){
            console.log('添加用药明细数组：', val);
            if(val==null || val==''){
                this.$message.warning("请选择药品数量")
                return
            }
            this.drugDetail.mdBuyPrice=this.drugDetail.dsOutPrice//药品售价
            this.drugDetail.mdName=this.drugDetail.dsName//药品名字
            this.drugDetail.mdDrugstoreId=this.drugDetail.id//药品id
             // 检查是否存在相同 ID 的 drugReturnDetail
            const exists = this.drugDetails.some(item => item.mdDrugstoreId === this.drugDetail.mdDrugstoreId);
            if (!exists) {
                this.drugDetail.mdNum=val
                this.drugDetails.push(this.drugDetail)
            }else{
                this.$message({
                    showClose: false,
                    message:"不能重复添加同一种药品，如需修改，请删除该条数据重新添加",
                    type:'warning'
                });
            }
            
        },
         //开药及药品明细
         addDrugItem(){
            if(this.drugDetails.length==0){
                this.$message.warning('请选择药品')
                return;
            }
            this.drugDistributionDTO.ppCaseId=this.patient.rsCaseId//病人id
            this.drugDistributionDTO.ppWorkerId=this.doctor.id//医生id
            //药品明细
            this.drugDistributionDTO.drugDetails=this.drugDetails

            this.$axios.post("api/doctor/addDrugDistribution",this.drugDistributionDTO)
            .then(res=>{
                if(res.data.code==200){
                    this.$message.success("开药成功，请患者前去缴费")
                    this.drugDistributionDTO={}
                    this.drugDetails=[]
                }
            })
        },

        //查找全部住院科室
        queryDe() {
            this.$axios.get("api/form/queryde")
                .then(res => {
                    if (res.data.code == 200) {
                        this.deList = res.data.data
                    }
                })
        },
        //住院申请
        addInpatient(){
            this.formData={}
            console.log(this.patient)
            this.formData.iaDepartmentId = this.docDeId;//科室id
            this.formData.iaWorkerId=this.doctor.id//医生id
            this.formData.iaCaseId=this.patient.rsCaseId//病人id
            this.$axios.post("api/form/addAdmissionForm",this.formData)
            .then(res=>{
                console.log(this.formData)
                if(res.data.code==200){
                    this.$message.success("申请已提交，请等待回复")
                }
            })
        },
        handleCloseDialogWithData(data) {
        // 处理从子组件传递过来的数据
        console.log('Received data from child:', data);
        // 关闭对话框
        this.dialogVisible = false;
    }
    },
    created(){
        this.queryDe()
        this.queryRegistered()
        this.queryDoctor()
        this.queryChecks()
    },
    components:{
        AddCase
    }
}
</script>

<style>

</style>